<template>
  <el-config-provider :locale="locale" :size="assemblySize" :button="buttonConfig">
    <!-- 页面触发 不触发获取锁屏 -->
    <div class="full_screen" @click="isTimeOut" @mousemove="isTimeOut">
      <router-view></router-view>
    </div>

    <lockScreen v-if="globalStore.openLock" :isLocked="isLocked" @change-locked="lockedFun"></lockScreen>
  </el-config-provider>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { getBrowserLang } from "@/utils";
import { useTheme } from "@/hooks/useTheme";
import { ElConfigProvider } from "element-plus";
import { LanguageType } from "./stores/interface";
import { useGlobalStore } from "@/stores/modules/global";
import { useUserStore } from "@/stores/modules/user";
import { storeToRefs } from "pinia";
import { useAuthStore } from "@/stores/modules/auth";
import en from "element-plus/es/locale/lang/en";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import ru from "element-plus/es/locale/lang/ru";
import lockScreen from "@/components/LockScreen/index.vue";

const globalStore = useGlobalStore();
const userInfoStore = useUserStore();
const authStore = useAuthStore();
// init theme
const { initTheme } = useTheme();
initTheme();

// init language
const i18n = useI18n();
onMounted(() => {
  const language = globalStore.language ?? getBrowserLang();
  i18n.locale.value = language;
  globalStore.setGlobalState("language", language as LanguageType);
  setLockShow();
});

// element language
const locale = computed(() => {
  if (globalStore.language == "zh") return zhCn;
  if (globalStore.language == "en") return en;
  if (globalStore.language == "ru") return ru;
  return getBrowserLang() == "zh" ? zhCn : getBrowserLang() == "ru" ? ru : en;
});

// element assemblySize
const assemblySize = computed(() => globalStore.assemblySize);

// element button config
const buttonConfig = reactive({ autoInsertSpace: false });

watch(
  () => globalStore.openLock,
  (newVal, oldVal) => {
    // console.log(newVal, "监听值。。。。。。")
    // console.log(oldVal)
    timeOut.value = 1 * 1000 * 60 * globalStore.lockTime;
    // console.log(timeOut,"超时使劲啊。。。。。")
    setLockShow();
  }
);
watch(
  () => globalStore.lockTime,
  (newVal, oldVal) => {
    // console.log(newVal, "监听值。。。。。。")
    // console.log(oldVal)
    timeOut.value = 1 * 1000 * 60 * globalStore.lockTime;
    isTimeOut();
  }
);

//监听公共设置内容参数变化
watch(globalStore.$state, (newValue, oldValue) => {
  authStore.saveUserValue();
});

let openLock = ref<Boolean>(false); //是否开启
let isLocked = ref<Boolean>(false);

const timer: any = ref(null);
const clickTime: any = ref({}); //点击触发时间
const currTime: any = ref({}); //当前时间
const timeOut: any = ref(1 * 1000 * 60 * globalStore.lockTime); //3秒测试
// const enterFun=()=>{
//   console.log("鼠标移入，，，，")
// }
const isTimeOut = () => {
  clickTime.value = new Date().getTime();
  // console.log("触发。。。。", clickTime.value)
  if (userInfoStore.token && globalStore.openLock) {
    if (!timer.value) {
      intervalFun();
    }
  }
};

const lockedFun = () => {
  isLocked.value = false;
  //点击时间
  clickTime.value = new Date().getTime();
  intervalFun();
};

const intervalFun = () => {
  timer.value = setInterval(() => {
    currTime.value = new Date().getTime();
    // 当前时间对比点击时时间相差大于3秒，保护屏触发
    if (currTime.value - clickTime.value > timeOut.value) {
      isLocked.value = true;
      // console.log(isLocked, "设置值")
      clearInterval(timer.value);
      timer.value = null;
    }
  }, 1000);
};

const setLockShow = () => {
  // console.log(globalStore.openLock, "是否开启。。。。。。")
  if (userInfoStore.token && globalStore.openLock) {
    //点击时间
    clickTime.value = new Date().getTime(); //无点击获取登录时间戳
    intervalFun();

    return;
  }
  clearInterval(timer.value);
  timer.value = null;
};
</script>
<style lang="scss">
.full_screen {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
</style>
